<template>
  <div class="more">
    <Header title="更多" />
    <main class="more-main">
      <div class="login-box">
        <div class="login-avatar">
          <img class="login-avatar" :src="require('../../assets/logo.jpg')" />
        </div>
        <div class="login-name">
          {{ getUserID || '未登录' }}
        </div>
        <div class="login-button">
          <van-button 
            @click="login"
            v-if="!getLoginStatus"
            type="primary" 
            block>
            登录
          </van-button>
          <van-button
            @click="logout"
            v-if="getLoginStatus" 
            type="info" 
            block>
            登出
          </van-button>
        </div>
      </div>
      <van-popup v-model="isLoginClick" round position="bottom" clase="login-popup">
        <van-picker
          title="选择登录用户"
          show-toolbar
          :columns="userMap"
          :default-index="0"
          @confirm="loginConfirm"
          @cancel="loginCancel"
          clase="login-picker"
        />
      </van-popup>
      <div class="clear-box">
        <van-button 
          v-if="!getLoginStatus"
          @click="clearLocalStorage" 
          type="danger" 
          block>
          清除本地缓存
        </van-button>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import Header from '../../components/Header/index.vue';
import { Dialog, Toast } from 'vant';
import { UserModule } from '../../store/modules/user';

@Component({
  name: 'More',
  components: {
    Header,
  },
})
export default class extends Vue {
  private userMap = ['leeyu0', 'leeyu1', 'leeyu2', 'leeyu3', 'leeyu4'];
  private isLoginClick = false;

  private get getUserID(): string {
    return UserModule.userID;
  }
  private get getLoginStatus(): boolean {
    return UserModule.isLogin;
  }

  private login() {
    this.isLoginClick = true;
  }
  private logout() {
    UserModule.logout();
  }
  private loginConfirm(value: string) {
    UserModule.login(value);
    this.isLoginClick = false;
  }
  private loginCancel() {
    this.isLoginClick = false;
  }

  private clearLocalStorage() {
    Dialog.confirm({
      message: '是否确认清除本地缓存？',
      width: (document.body.clientWidth * 0.5) || 320,
      confirmButtonColor: 'red',
      cancelButtonColor: '#409EFF',
    }).then(() => {
      localStorage.clear();
      UserModule.init();
      Toast.success({
        message: '清除成功',
        forbidClick: true,
        duration: 1000,
      });
    });
  }
}
</script>

<style scoped>
.more, .more-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.more-main {
  border-top: 1px solid #D0CECF;
  border-bottom: 1px solid #D0CECF;
  overflow: auto;
}
.login-box {
  height: 100%;
  padding: 50px;
}
.login-avatar {
  height: 300px;
  width: 300px;
}
.login-name {
  text-align: center;
  line-height: 100px;
}
.login-button span{
  font-size: 30px;  
}
.clear-box {
  height: 100px;
}
.clear-box span{
  width: 300px;
  font-size: 30px;  
}
.login-popup {
  height: 20%;
}
.login-picker {
  height: 100%;
}
</style>
